<template>
  <div class="loginLogin">
    <h2 class="text-xl font-medium mb-4">密码登录</h2>
    <a-form
      :model="form"
      name="basic"
      autocomplete="off"
      ref="formRef"
      :rules="rules"
    >
      <a-form-item name="Phone">
        <a-input v-model:value="form.Phone" placeholder="请输入手机号" />
      </a-form-item>
      <a-form-item name="Password">
        <a-input-password
          v-model:value="form.Password"
          placeholder="请输入密码"
        />
      </a-form-item>
      <a-row justify="space-between">
        <a-form-item name="remember">
          <a-checkbox v-model:checked="form.remember">记住我</a-checkbox>
        </a-form-item>

        <a-button type="text" @click="goRestPassword">忘记密码？</a-button>
      </a-row>

      <a-button
        class="w-full rounded-3xl text-lg h-10"
        type="primary"
        html-type="submit"
        @click="handleSubmit"
        >确认</a-button
      >
      <a-row justify="space-between" class="mt-6">
        <a-button class="w-2/5 h-9">验证码登录</a-button>
        <a-button class="w-2/5 h-9">注册账号</a-button>
      </a-row>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { userLoginApi } from '@/service/login/login/index'
import { message } from 'ant-design-vue'

interface FormState {
  Phone: string
  Password: string
  remember: boolean
}
const formRef = ref()
const rules = {
  Phone: [
    { required: true, message: '请输入手机号!' },
    { min: 11, max: 11, message: '请输入11位手机号' }
  ],
  Password: [{ required: true, message: '请输入密码!' }]
}
const form = ref<FormState>({
  Phone: '',
  Password: '',
  remember: true
})

const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    let res = await userLoginApi({
      Phone: form.value.Phone,
      Password: form.value.Password
    })
    if (res.state == '0') {
      return message.error(res.msg)
    }
  } catch (err) {
    console.log('err', err)
  }
}
const goRestPassword = () => {}
</script>

<style scoped lang="less">
.loginLogin {
  > h2 {
    color: var(--theme-color);
  }
}
</style>
